import { useTranslation } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import BaseButton from '../../components/BaseButton'
import counterStore from '../../store/counter.store'
import { RootState } from '../../store/store'

const Counter = () => {
  const { t } = useTranslation()
  const counterState = useSelector((state: RootState) => state.counter)
  const dispatch = useDispatch()
  const increment = () => {
    dispatch(counterStore.actions.add(1))
  }

  const decrement = () => {
    dispatch(counterStore.actions.add(-1))
  }

  return (
    <div>
      Counter
      <div>{counterState.count}</div>
      <div>{t('Welcome to React')}</div>
      <BaseButton variant="text" onClick={increment}>
        Increment
      </BaseButton>
      <BaseButton onClick={decrement}>Decrement</BaseButton>
    </div>
  )
}

export default Counter
